<template>
  <div class="page-card save-event">
    <h-query ref="query" :showKey="['startTime,endTime','title']" :query="query" @search="search">
      <!-- <a-button type="primary" class="a-button-right" style="margin: 6px 0 0 0" @click="showData = true">添加存档</a-button> -->
    </h-query>
    <a-row :gutter="[20,20]">
      <a-col :span="8" v-for="(item, i) in list" :key="i">
        <div class="save-event--card">
          <h1 class="ellipsis">{{ item.title | htmlFilter }}</h1>
          <p class="ellipsis-2">事件简介：{{ item.describe | htmlFilter }}</p>
          <!-- <div class="save-event--tip" :style="{backgroundImage: `url(${require('@/assets/Image/icon/rect-bg.png')})`}">

            <span v-if="item.eventLevel == 1">重点事件</span>
            <span v-if="item.eventLevel == 0">普通事件</span>
          </div> -->
          <div class="save-event--footer">
            <a-row :gutter="[0, 4]">
              <a-col :span="12">
                <p>事件开始时间：{{ moment(item.procTime).format('YYYY-MM-DD HH:mm') }}</p>
              </a-col>
              <a-col :span="12">
                <p>事件结束时间：{{ moment(item.endTime).format('YYYY-MM-DD HH:mm') }}</p>
              </a-col>
              <!-- <a-col :span="12">
                <p>存档时间：{{ moment(item.createTime).format('YYYY-MM-DD HH:mm') }}</p>
              </a-col> -->
              <a-col :span="12">
                <p>事件持续时长：{{ item.totalTime }}小时</p>
              </a-col>
              <a-col :span="12">
                <p>下发关联部门：{{ item.depart }}</p>
              </a-col>
            </a-row>
          </div>
          <div class="save-event--action">
            <div @click="toDetail(item, 'cz', 'history')">
              事件回顾
            </div>
            <div @click="toURL(item)" v-if="item.eventLevel == 1">
              驾驶舱
            </div>
          </div>
          <!-- <div class="save-event--action" > -->
          <!-- <SvgIcon @click.stop="remove(item)" class="delete-icon" iconClass="delete" /> -->
          <!-- </div> -->
        </div>
      </a-col>
    </a-row>
    <div class="hlist-pagination" style="">
      <a-pagination v-model="current" v-bind="paginationConfig" @change="change" />
    </div>

    <createData v-model="showData" @submit="submit" />
  </div>
</template>

<script>
import SvgIcon from '@/components/SvgIcon';
import { getEventDaily, deleteEventArchive } from '@/api/serve';
import { replaceHTML } from '@/api/common';
import moment from 'moment';
import createData from './action/createData';

export default {
  components: {
    SvgIcon,
    createData
  },
  inject: ['toDetail'],
  data() {
    return {
      moment,
      showData: false,
      current: 1,
      paginationConfig: {
        pageSize: 12,
        total: 100
      },
      list: [],
      query: [
        // {
        //   label: '事件类型',
        //   type: 'select',
        //   key: 'level',
        //   options: [
        //     {
        //       label: '全部',
        //       value: ''
        //     },
        //     {
        //       label: '日常事件',
        //       value: '0'
        //     },
        //     {
        //       label: '应急事件',
        //       value: '1'
        //     }
        //   ]
        // }
      ],
      queryParams: {
        pageNo: 1,
        pageSize: 12
        // level: '0'
      }
    };
  },
  created() {
    // this.queryParams.level = this.$route.query.level;
    // this.$nextTick(() => {
    //   this.$refs.query.updateQuery('level', this.$route.query.level);
    // });
    this.getList();
  },
  methods: {
    submit() {
      this.getList();
    },
    search(params) {
      Object.assign(this.queryParams, params);
      this.getList();
    },
    change(page) {
      this.queryParams.pageNo = page;
      this.getList();
    },
    getList(params) {
      this.list = [];
      if (params) {
        Object.assign(this.queryParams, params);
      }
      getEventDaily(this.queryParams).then(res => {
        this.list = res.data.records.map(e => {
          return {
            ...e,
            content: (typeof e.content == 'string') ? replaceHTML(e.content) : ''
          };
        });
        this.paginationConfig.total = res.data.total;
      });
    },
    remove({ archiveId }) {
      const that = this;
      this.$confirm({
        title: '温馨提示',
        content: '确定要删除吗？',
        onOk() {
          deleteEventArchive({
            archiveId,
            isDelete: -1
          }).then(res => {
            that.$message.success('删除成功');
            that.getList();
          });
        }
      });
    },
    toURL({ id, title }) {
      this.$router.push({ path: '/cockpit/index', query: { id, title } });
    }
  }
};
</script>

<style scoped lang="less">
  h1,p {
    margin: 0;
  }
  .save-event {
    .a-button-blue {
      position: absolute;
      right: 0;
      top: 0;
    }
    .save-event--card {
      background: #FFFFFF;
      box-shadow: 0px 0px 20px 0px rgba(20,15,41,0.1000);
      padding: 16px 20px;
      position: relative;
      padding-bottom: 93px;
      height: 295px;
      h1 {
        font-size: 20px;
        font-weight: 500;
        color: #333333;
        margin-top: 18px;
      }
      >p {
        font-size: 15px;
        font-weight: 400;
        color: #999999;
        line-height: 1.8;
        margin-top: 8px;
        height: 54px;
      }
      .save-event--footer {
        margin-top: 20px;
        position: absolute;
        bottom: 90px;
        p {
          font-size: 13px;
          font-weight: 400;
          color: #1F3B8A;
        }
      }
      .save-event--action {
        width: 100%;
        height: 73px;
        background: rgba(49, 116, 254, 0.1);
        font-size: 18px;
        font-weight: 400;
        color: #1F3B8A;
        line-height: 73px;
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        >div {
          width: 100%;
          cursor: pointer;
          border-right: 1px solid rgba(49, 116, 254, 0.1);
          &:hover {
            opacity: 0.7;
          }
        }

        .delete-icon {
          position: absolute;
          right: 20px;
          font-size: 30px;
          top: 50%;
          transform: translate(0, -50%);
          cursor: pointer;
          &:hover {
            color: red;
          }
        }
      }
      .save-event--tip {
        position: absolute;
        right: 0;
        top: 0;
        width: 98px;
        height: 36px;
        color: #fff;
        text-align: center;
        text-indent: 4px;
        line-height: 36px;
      }
    }
    .hlist-pagination {
      margin: 20px 0;
      text-align: center;
      margin-top: 80px;
    }
  }
</style>
